<template>
    <div class="wrap lh40 bgwhite">
        <p class="clearfix fs14">
            <span class="fl tl name pl10">{{curOrder.varietyName}}</span>
            <span class="fl ml10">{{curOrder.direction==1?'买涨':'买跌'}}</span>
            <span class="fl ml10" v-show="curOrder.orderMode==1">市</span>
            <span class="fl ml10" v-show="curOrder.orderMode==2">高</span>
            <span class="fl ml10" v-show="curOrder.orderMode==3">挂</span>
            <span class="fl ml10">{{curOrder.tradeMode==0?'元':'角'}}</span>
            <span class="fr wind" @click.stop="setStopWinLoss(curOrder)" v-show="curOrder.orderStatus==2">
                <i class="bgred white">设置止盈止损</i>
            </span>
        </p>
        <div class="list">
            <p class="lh30 pl10 pr10">
                <span class="clearfix wide">
                    <i class="fl green">{{curOrder.stopLossMoney|formatPoint(curOrder.marketPoint)}}(¥{{curOrder.stopLossPrice*curOrder.handsNum*curOrder.tradeRate*curOrder.ratio|formatMoney()}})</i>
                    <i class="fr mr5">止损价</i>
                </span>
                <span class="clearfix narrow">
                    <i class="fl ml5">{{curOrder.lastPrice|formatPoint(curOrder.marketPoint)}}</i>
                    <i class="fr">当前价</i>
                </span>
            </p>

            <p class="lh30 pl10 pr10">
                <span class="fl clearfix wide">
                    <i class="fl red">{{curOrder.stopWinMoney|formatPoint(curOrder.marketPoint)}}(¥{{curOrder.stopWinPrice*curOrder.handsNum*curOrder.tradeRate*curOrder.ratio|formatMoney()}})</i>
                    <i class="fr mr5">止盈价</i>
                </span>
                <span class="clearfix narrow">
                    <i class="fl ml5">{{curOrder.realAvgPrice|formatPoint(curOrder.marketPoint)}}</i>
                    <i class="fr">买入价</i>
                </span>
            </p>
            <p class="lh30 pl10 pr10">
                <span class="hand clearfix wide">
                    <i class="fl">{{curOrder.handsNum}}手</i>
                    <i class="fr mr5">交易手数</i>
                </span>
                <span class="clearfix narrow">
                    <i class="fl ml5">{{curOrder.openPrice|formatPoint(curOrder.marketPoint)}}</i>
                    <i class="fr">开仓价</i>
                </span>
            </p>
            <p class="lh30 pl10">
                <span class="clearfix w100" style="border-right: 0 none;">
                    <i class="fl" :class="{red:curOrder.earnMoney>=0,green:curOrder.earnMoney<0}">{{curOrder.sign}}{{curOrder.earnMoney
                        || '0' |formatMoney()}}(￥{{curOrder.earnMoney*curOrder.ratio || '0'
                        |formatMoney()}})</i>
                    <i class="fr mr10">当前赢利</i>
                </span>
            </p>
        </div>
        <p class="lh20 tl mt5 pl10 fontc1">下单时间 {{curOrder.buyTimeStr}}</p>
    </div>
</template>
<script>
export default {
    name: 'obard',
    props: {
        curOrder: {
            type: Object,
            required: true,
            default: {},
        },
        setStopWinLoss: {
            type: Function,
            required: true,
            default: () => {},
        }
    }
}
</script>
<style scoped>
    .wind i {
		display: inline-block;
		height: 24px;
		line-height: 24px;
		padding-left: 5px;
		padding-right: 5px;
		border-radius: 2px;
		margin-right: 10px;
	}
    .list p {
		display: flex;
		border-bottom: 1px solid #e2e2e2;
		white-space: nowrap;
	}
	.list p span.wide {
		width: 65%;
	}
	.list p span.narrow {
		width: 35%;
	}
	.list p span.equal {
		width: 50%;
	}
	.list {
		border-top: 1px solid #e2e2e2;
	}
	.list p span:first-child {
		border-right: 1px solid #e2e2e2;
    }
</style>


